<template>
  <div class="person clear">
    <div class="person-flex-name clear">
      <img class="head-img" src="@/assets/jssy05.png" alt="">
      <div class="name-info">
        <p class="name">{{teacher_info.truename}}</p>
        <p class="info">{{teacher_info.mobile}}</p>
      </div>
      <!--<img @click="router({path: './forgetPwd'})" src="@/assets/wode02.png" class="edit" alt="">-->
    </div>
    <div class="result-list">
      <div class="item top-item">
        <div class="tab-person">
          <p class="text" :class="(comment_num == 0) ? 'active' : ''" @click="comment(0)">待点评{{wd}}</p>
          <p class="text" :class="(comment_num == 1) ? 'active' : ''" @click="comment(1)">已评{{yd}}</p>
        </div>
      </div>
      <div class="item" v-for="(item, index) in child_lists" :key="index" @click="router({path: './commentDetails',query:{id: item.id}})">
        <p class="time"><img class="time-img" src="@/assets/jssy03.png" alt=""> {{item.create_time}}</p>
        <div class="block-cons clear">
          <div class="cons">
            <p class="title">孩子</p>
            <p class="name">{{item.childname}}</p>
          </div>
          <div class="cons">
            <p class="title">年龄</p>
            <p class="name">{{item.age}}<span>岁</span></p>
          </div>
          <div class="cons comment">
            <div v-if="comment_num == 0">
              <span class="comment-con">点评</span>
              <img src="@/assets/jssy04.png" alt="">
            </div>

            <div v-if="comment_num == 1">
              <p class="title">{{item.review_time}}</p>
              <p class="name">已点评</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  import {teacherIndex,teacherInfo} from '@/api/api'

  export default {
    components: {
    },
    data () {
      return {
        comment_num: 0,
        child_lists:[],
        yd:0,
        wd:0,
        teacher_info:[],
      }
    },
    created () {
        this.getTeacherIndex();
        this.getTeacherInfo();
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      comment (index) {
        this.comment_num = index;
        this.child_lists=[];
        this.getTeacherIndex();
      },
      getTeacherIndex(){
        teacherIndex({review:this.comment_num}).then((res)=>{
          this.child_lists = res.data.lists;
          this.yd = res.data.yd;
          this.wd = res.data.wd;
          console.log(res.data)
        });
      },
      getTeacherInfo(){
          teacherInfo().then((res)=>{
          this.teacher_info = res.data.info;
          // console.log(res)
        });
      }
    }
  }
</script>

<style lang="stylus" scoped>
.person
  min-height 100vh
  min-width 100vw
  background-color #f5f5f5
  background-image url('../../assets/jiangshijieshao01.png')
  background-repeat no-repeat
  background-size 100%
  .person-flex-name
    float left
    position relative
    overflow hidden
    margin-top 1.7rem
    margin-left 1.5rem
    width calc(100% -1.5rem)
    box-sizing border-box
    .head-img
      width 5rem
      float left
    .name-info
      float left
      color #F5F5F5
      margin-top .5rem
      margin-left 1rem
      .name
        font-size 1.7rem
        font-weight bold
    .edit
      position absolute
      right 1.5rem
      top .6rem
      width 8.2rem
  .result-list
    padding-top 2rem
    width 100%
    float left
    .top-item.item   
      padding 1.5rem 1.6rem
    .item
      width 92%
      margin-left 4%
      border-radius .3rem
      background-color #fff
      box-sizing border-box
      margin-bottom 1rem
      padding 1rem 1.5rem
      .tab-person
        display flex
        .text
          flex 1
          text-align center
          font-size 1.6rem
          color #666
        .text.active
          color #172F6D
          position relative
          font-weight bold
          &:after
            content ''
            position absolute
            width 4rem
            height .3rem
            background-color #172F6D
            left 50%
            margin-left -2rem
            bottom -1.2rem
      .time
        color #333333
        font-size 1.1rem
      .time-img
        width .7rem
        height .7rem
        display inline-block
        margin-right .5rem
      .block-cons
        margin-top 1.5rem
        .cons
          float left
          width 30%;
          .title
            color #666
            font-size 1.2rem
          .name
            color #333
            font-weight bold
            font-size 1.8rem
            margin-top .5rem
            span
              color #999
              font-size 1.2rem
              font-weight 400
              margin-left .3rem
        .comment
          float right
          text-align right
          padding-right 1.5rem
          width auto
          img
            display inline-block
            vertical-align middle
            width 1.5rem
          .comment-con
            display inline-block
            vertical-align middle
            font-size 1.6rem
            font-weight 500
            line-height 5rem
            height 5rem
            margin-right .4rem
</style>
